{% extends "base_page.html" %}

{% block content %}
<div class="container">
        <form action="" method=POST >
                <div class="alert alert-block alert-info fade in">
                <h4 class="alert-info" style="padding-bottom: 10px;">If you want to regenerate tickets,
                    click fllowing button, otherwise original ticktes and case will be used .</h4>
                <p>
                    <button id="generateBTN" class="btn btn-success btn-large" autocomplete="off" data-toggle="modal" data-target="#myModal"   >&nbsp;&nbsp;Regenerate Tickets&nbsp;&nbsp;</button>
                </p>
                </div>


        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Generate or not</h4>
                    </div>
                    <div class="modal-body">
                        <p>Generate new tickets and cases may take some time, please confirm your operation!</p>
                    </div>
                    <div class="modal-footer" >
                        <table border="0" align="center">
                            <tr>
                                <td align="center" valign="top">
                                        <button type="submit" class="btn btn-primary" id="btn_start" onclick="loaddingAjax()">Start</button>
                                        <!--onclick="startProgerss()"  onclick="loaddingAjax()"-->
                                </td>
                                <td align="center" valign="top">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div id="myModalrunninig"  class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-body">
                <p align="center" font-size="18px">running...</p>
            </div>
        </div>


        <div id ="loaddingimg" class="hidden">
                <!--<div id ="proId" class="container" aria-hidden="true" hidden="false"  >
                <img src="/static/img/loadding.gif" align="center">-->
            <table width="100%" height="100%">
              <tr>
                <td ><img src="/static/img/loadding.gif" align="center"></td>
              </tr>
            </table>
        </div>

        </form>

        <form action="" method=POST>
           <legend>Please select the appropriate file(s).</legend>
            <label class="text-info"><strong>Host Ip Address :</strong></label>
            <input type="text" class="input-large" name="host_ip" id="h_ip" onblur="check_IP()" />

            <div id="wrong_ip" class="alert alert-block alert-error fade in" hidden="true">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <h4 class="alert-heading">NOT a valid ip address. </h4>
                <p>Please Input again.</p>
            </div>

            <label class="text-info"><strong>Password :</strong></label>
            <input type="text" class="input-large" name="PassW" id="Pass_W" />

            <label class="text-info"><strong>Connect Type :</strong></label>
            <select name="connType" id="connType" onchange="selectConnType()">
                <option>Wireless</option>
                <option>USB</option>
                <option>Wired</option>
            </select>

            <label class="text-info"><strong>Data File list :</strong></label>

            {% for item in fl %}
            <label class="checkbox">
                <input id="{{ item[0:-4].replace(" ", "_") }}" type="checkbox" name="{{ item[0:-4].replace(" ", "_") }}"> {{ item }}
            </label>
            {% endfor %}

            <label class="text-info"><strong>Check DiscoveryTree? </strong></label>
            <label class="checkbox">
                <input type="checkbox" onclick="set_if_check_dTree(this)"> If checked, then a extra test procedure will be added to validate the existence of every listed xml file that included in discovery tree.
            </label>

            <label class="text-info"><strong>Https or Http :</strong></label>
            <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-info" onclick="set_http_or_https(this)">HTTP</button>
                <button type="button" class="btn btn-info" onclick="set_http_or_https(this)">HTTPS</button>
            </div>

            <hr />
        {% if not fl[0] == 'No files found' %}
            <div class="alert alert-block alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <h4 class="alert-info" style="padding-bottom: 10px;">if you want to chose specific tickets,
                    click button below, otherwise default rules will be used to find accordingly one.</h4>
                <p>
                    <a class="btn btn-info" data-toggle="collapse" data-target="#demo" onclick="clearSelection()">Pick Tickets Manually</a>
                </p>
            </div>
            <div id="demo" class="collapse">
            <legend>Manually Select Tickets:</legend>
                <table>
                    {% for entry in fl %}
                    <tr class="table table-bordered">
                        <td>{{ entry }}</td>
                        <td>
                            {% for ticket in tl %}
                            <label class="radio inline">
                                <input type="radio" name="{{ entry }}" value="{{ ticket }}"> {{ ticket }}
                            </label>
                            {% endfor %}
                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            <hr />

            <button id="launchBTN" class="btn btn-success btn-large" type="submit" data-loading-text="Verifying Data, please wait..." onclick="loadState()" autocomplete="off">&nbsp;&nbsp;Next&nbsp;&nbsp;</button>

            </p>
        {% endif %}
        </form>
        {% if fl[0] ==  "No files found" %}
        <div class="alert alert-block alert-error fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <h4 class="alert-error" style="padding-bottom: 10px;">Nothing found!
                Please make sure put the excel file in right place.</h4>
            <p>
                <a class="btn btn-danger" href="/">Go Back</a>
            </p>
        </div>
        {% endif %}


    </div>
{% endblock %}

{% block ownjs %}
    <script type="text/javascript">
    function clearSelection(){
    {% for item in fl %}
        $("#{{ item[0:-4].replace(" ", "_") }}").attr('checked', false);
    {% endfor %}
    }

    function selectConnType(){
        if ($("#connType").find("option:selected").text() == "USB"){
            $("#h_ip").attr('value', '0.0.0.0');
            $("#h_ip").attr('disabled', true);
            alert("Test use USB connection not finish yet")
        } else {
            $("#h_ip").attr('disabled', false);
        }
    }

    function check_IP()
    {
        var ip = $("#h_ip").attr('value');
        var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
        if(re.test(ip))
        {
            if( RegExp.$1<256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256)
                return true;
            else
                $('#wrong_ip').attr('hidden', false);
                return false;
        }
        $('#wrong_ip').attr('hidden', false);
        return false;
    }

    function loadState() {
        $('#launchBTN').button('loading')
    }
    function set_http_or_https(x) {
        var reg_url = "/_set_http_or_https";
        var flag;
        var content = $(x).html();
        flag = (content === "HTTPS") && 1 || 0;

        $.get(reg_url, {s_flag:flag})
    }
    function set_if_check_dTree(obj){
        var req_url = "/_set_check_dTree";

        if ($(obj).attr("checked") === "checked")
            $.get(req_url, {dTree_flag: 1})
        else
            $.get(req_url, {dTree_flag: 0})
    }


    function startProgerss(){
    $('#loaddingimg').show();
    window.confirm("confirm");
    window.setTimeout($('#loaddingimg').hidden,8000);
    window.confirm("last");
    }


    function loaddingAjax() {
        $('#myModal').attr("class","hidden");
        $('#myModalrunninig').modal('show');
        $.ajax({
            url:"/load_run_result",
            type: 'POST',
            dataType : "json",
            async:false ,
            data : {

                    },
            success: function(data){
                if (data.run_status == 'OK') {
                    $('#myModalrunninig').modal('hide');
                    alert("Generation completion!");
            } else {
                    alert("error...")
            }
            }
        })
    }
    </script>

{% endblock %}


